<template>
	<div>
		<mj-title type="h2" title="Cascader 级联选择器"></mj-title>
		<div class="page-desc">一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。</div>

		<mj-title type="h5" title="基础使用"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
                选项：{{ value1 }} - {{ text1 }}
                <div class="flex">
                    <div class="demo-cascader">
                        <mj-cascader :data="data" v-model="value1" @on-change="change1"></mj-cascader>
                    </div>
                    <div class="ml20">
                        <mj-button @click="init1" type="primary">初始数据</mj-button>
                        <mj-button @click="updata" type="primary">更新数据</mj-button>
                        <mj-button @click="cleardata">清空数据</mj-button>
                    </div>
                </div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
                        &lt;template>
                            选项：{ value1 } - { text1 }
                            &lt;mj-cascader :data="data" v-model="value1" @on-change="change1">&lt;/mj-cascader>
                        &lt;/template>
                        &lt;script>
                        export default {
                            data() {
                                return {
                                    text1:'未选择',
                                    value1:[]
                                    data: [{
                                        value: 'beijing',
                                        label: '北京',
                                        children: [
                                            {
                                                value: 'gugong',
                                                label: '故宫'
                                            },
                                            {
                                                value: 'tiantan',
                                                label: '天坛'
                                            },
                                            {
                                                value: 'wangfujing',
                                                label: '王府井'
                                            }
                                        ]
                                    }, {
                                        value: 'jiangsu',
                                        label: '江苏',
                                        children: [
                                            {
                                                value: 'nanjing',
                                                label: '南京',
                                                children: [
                                                    {
                                                        value: 'fuzimiao',
                                                        label: '夫子庙',
                                                    }
                                                ]
                                            },
                                            {
                                                value: 'suzhou',
                                                label: '苏州',
                                                children: [
                                                    {
                                                        value: 'zhuozhengyuan',
                                                        label: '拙政园',
                                                        disabled:true
                                                    },
                                                    {
                                                        value: 'shizilin',
                                                        label: '狮子林',
                                                    }
                                                ]
                                            }
                                        ],
                                    },{
                                        value:'shanghai',
                                        label:'上海'
                                    }]
                                }
                            },
                            methods:{
                                change1(data) {
                                    console.log('change选中项：',data)
                                    this.text1 = data.item.label
                                },
                            }
                        }
                        &lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

        <mj-title type="h5" title="禁用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div class="flex">
                    <div class="demo-cascader">
                        <mj-cascader :data="data2" disabled></mj-cascader>
                    </div>
                    <div class="demo-cascader ml30">
                        <mj-cascader :data="data2"></mj-cascader>
                    </div>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                        &lt;template>
                            &lt;mj-cascader :data="data" v-model="value2" disabled>&lt;/mj-cascader>
                            &lt;mj-cascader :data="data" v-model="value2">&lt;/mj-cascader>
                        &lt;/template>
                        &lt;script>
                        export default {
                            data() {
                                return {
                                    value2:[]
                                    data2: [{
                                        value: 'zhejiang',
                                        label: '浙江',
                                        children: [{
                                            value: 'hangzhou',
                                            label: '杭州',
                                            children: [{
                                                value: 'xihu',
                                                label: '西湖'
                                            }]
                                        }]
                                    }, {
                                        value: 'jiangsu',
                                        label: '江苏',
                                        disabled: true,
                                        children: [{
                                            value: 'nanjing',
                                            label: '南京',
                                            children: [{
                                                value: 'zhonghuamen',
                                                label: '中华门'
                                            }]
                                        }]
                                    }],
                                }
                            }
                        }
                        &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="动态加载"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                选项：{{ value4 }}
                <div class="flex">
                    <div class="demo-cascader mr10">
                        <mj-cascader :data="data4" v-model="value4" :load-data="loadData"></mj-cascader>
                    </div>
                    <mj-button @click="init4" type="primary">初始化</mj-button>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                        &lt;template>
                            选项：{ value4 }
                            &lt;mj-cascader :data="data4" v-model="value4" :load-data="loadData">&lt;/mj-cascader>
                        &lt;/template>
                        &lt;script>
                        export default {
                            data() {
                                return {
                                    value4:[]
                                    data4: [
                                        {
                                            value: 'beijing',
                                            label: '北京',
                                            children: [],
                                            loading: false
                                        },
                                        {
                                            value: 'hangzhou',
                                            label: '杭州',
                                            children: [],
                                            loading:false
                                        }
                                    ]
                                }
                            },
                            methods:{
                                loadData(item,callback) {
                                    console.log('动态加载选中：',item)
                                    item.loading = true;
                                    setTimeout(() => {
                                        if (item.value === 'beijing') {
                                            item.children = [
                                                {
                                                    value: 'csdn',
                                                    label: 'CSDN',
                                                    children: [],
                                                    loading: false
                                                },
                                                {
                                                    value: 'baidu',
                                                    label: '百度'
                                                },
                                                {
                                                    value: 'sina',
                                                    label: '新浪'
                                                }
                                            ];
                                        } else if (item.value === 'hangzhou') {
                                            item.children = [
                                                {
                                                    value: 'ali',
                                                    label: '阿里巴巴'
                                                },
                                                {
                                                    value: '163',
                                                    label: '网易'
                                                }
                                            ];
                                        } else if (item.value === 'csdn') {
                                            item.children = [
                                                {
                                                    value: '1',
                                                    label: 'item1'
                                                },
                                                {
                                                    value: '2',
                                                    label: 'item2'
                                                }
                                            ];
                                        }
                                        item.loading = false;
                                        callback()
                                    }, 1000);
                                },
                            }
                        }
                        &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="选择任意一级"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div class="demo-cascader">
                    <div class="page-desc" style="margin-bottom: 10px;">选择即改变,设置属性 <code>change-on-select</code> 点任何一级都可以选择。</div>
                    选项：{{ value2 }} - {{ text2 }}
                    <mj-cascader :data="data" v-model="value2" @on-change="change2" change-on-select></mj-cascader>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                        &lt;template>
                            选项：{ value2 } - { text2 }
                            &lt;mj-cascader :data="data" v-model="value2" @on-change="change2" change-on-select>&lt;/mj-cascader>
                        &lt;/template>
                        &lt;script>
                        export default {
                            data() {
                                return {
                                    value2:[],
                                    text2:'未选择',
                                    data:[....]
                                }
                            },
                            methods:{
                                change2(data) {
                                    console.log('change选中项：',data)
                                    this.text2 = data.label
                                },
                            }
                        }
                        &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="可清空值"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div class="page-desc">通过 <code>clearable</code> 设置输入框可清空</div>
                选项：{{ value1 }}
                <div class="demo-cascader">
                    <mj-cascader :data="data" v-model="value1" clearable></mj-cascader>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                        &lt;template>
                            &lt;mj-cascader :data="data" v-model="value1" clearable>&lt;/mj-cascader>
                        &lt;/template>
                        &lt;script>
                        export default {
                            data() {
                                return {
                                    value1:[],
                                    data:[....]
                                }
                            },
                        }
                        &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="移入展开"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div class="page-desc">设置属性 <code>trigger</code> 为 <code>hover</code>，当鼠标悬停时就会展开子集。</div>
                <div class="demo-cascader">
                    {{ value3 }} - {{ text3 }}
                    <mj-cascader :data="data" v-model="value3" trigger="hover" @on-change="change3"></mj-cascader>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                        &lt;template>
                            &lt;mj-cascader :data="data" v-model="value1" trigger="hover">&lt;/mj-cascader>
                        &lt;/template>
                        &lt;script>
                        export default {
                            data() {
                                return {
                                    value1:[],
                                    data:[....]
                                }
                            },
                        }
                        &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="尺寸"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div class="demo-cascader flex">
                    <mj-cascader :data="data" v-model="value5" size="large"></mj-cascader>
                    <mj-cascader :data="data" v-model="value6" class="ml20"></mj-cascader>
                    <mj-cascader :data="data" v-model="value7" size="small" class="ml20"></mj-cascader>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                        &lt;template>
                            &lt;mj-cascader :data="data" v-model="value5" size="large">&lt;/mj-cascader>
                            &lt;mj-cascader :data="data" v-model="value6" class="ml20">&lt;/mj-cascader>
                            &lt;mj-cascader :data="data" v-model="value7" size="small" class="ml20">&lt;/mj-cascader>
                        &lt;/template>
                        &lt;script>
                        export default {
                            data() {
                                return {
                                    value5:[],
                                    value6:[],
                                    value7:[],
                                    data:[....]
                                }
                            },
                        }
                        &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

<!--         <mj-title type="h5" title="搜索"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div class="page-desc">使用属性 <code>filterable</code> 可直接搜索选项并选择。</div>
                选项：{{ value8 }}
                <div class="demo-cascader">
                    <mj-cascader :data="data" v-model="value8" filterable clearable @on-change="change4"></mj-cascader>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                        &lt;template>
                            &lt;mj-cascader :data="data" v-model="value8" filterable clearable>&lt;/mj-cascader>
                        &lt;/template>
                        &lt;script>
                        export default {
                            data() {
                                return {
                                    value8:[],
                                    data:[....]
                                }
                            },
                        }
                        &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs> -->

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Cascader 参数"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>v-model</td>
                    <td>选中项绑定值</td>
                    <td>-</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>可选项的数据源，格式参照示例说明</td>
                    <td>Array</td>
                    <td>[]</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>是否禁用选择器</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>clearable</td>
                    <td>是否支持清除</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>placeholder</td>
                    <td>默认显示的文本</td>
                    <td>String</td>
                    <td>请选择</td>
                </tr>
                <tr>
                    <td>trigger</td>
                    <td>次级菜单展开方式，可选值为 <code>click</code> 或 <code>hover</code></td>
                    <td>String</td>
                    <td>click</td>
                </tr>
                <tr>
                    <td>change-on-select</td>
                    <td>当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的示例</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>empty-text</td>
                    <td>无匹配选项时的内容</td>
                    <td>String</td>
                    <td>暂无数据</td>
                </tr>
                <tr>
                    <td>size</td>
                    <td>输入框大小，可选值为<code>large</code>和<code>small</code>或者不填</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>load-data</td>
                    <td>动态获取数据，数据源需标识 loading</td>
                    <td>Function</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>transfer</td>
                    <td>是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
<!--                 <tr>
                    <td>filterable</td>
                    <td>是否支持搜索</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr> -->
            </tbody>
        </table>

        <mj-title type="h6" title="Cascader 事件"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>on-change</td>
                    <td>选择完成后的回调，返回一个data值，含有item(已选的label和value)和value(已选字段从父级开始的value)字段</td>
                    <td>{item,value}</td>
                </tr>
                <tr>
                    <td>on-open-change</td>
                    <td>展开和关闭弹窗时触发</td>
                    <td>显示状态，Boolean</td>
                </tr>
            </tbody>
        </table>
	</div>
</template>

<script>
export default {
	data() {
		return {
            text1:'未选择',
            text2:'未选择',
            text3:'未选择',
            // value1: ['jiangsu','suzhou','shizilin'],
            value1: [],
            value2: [],
            value3: [],
            value4: [],
            value5: [],
            value6: [],
            value7: [],
            value8: [],
            data: [{
                value: 'beijing',
                label: '北京',
                children: [
                    {
                        value: 'gugong',
                        label: '故宫'
                    },
                    {
                        value: 'tiantan',
                        label: '天坛'
                    },
                    {
                        value: 'wangfujing',
                        label: '王府井'
                    }
                ]
            }, {
                value: 'jiangsu',
                label: '江苏',
                children: [
                    {
                        value: 'nanjing',
                        label: '南京',
                        children: [
                            {
                                value: 'fuzimiao',
                                label: '夫子庙',
                            }
                        ]
                    },
                    {
                        value: 'suzhou',
                        label: '苏州',
                        children: [
                            {
                                value: 'zhuozhengyuan',
                                label: '拙政园',
                                disabled:true
                            },
                            {
                                value: 'shizilin',
                                label: '狮子林',
                            }
                        ]
                    }
                ],
            },{
                value:'shanghai',
                label:'上海'
            }],
            data2: [{
                value: 'zhejiang',
                label: '浙江',
                children: [{
                    value: 'hangzhou',
                    label: '杭州',
                    children: [{
                        value: 'xihu',
                        label: '西湖'
                    }]
                }]
            }, {
                value: 'jiangsu',
                label: '江苏',
                disabled: true,
                children: [{
                    value: 'nanjing',
                    label: '南京',
                    children: [{
                        value: 'zhonghuamen',
                        label: '中华门'
                    }]
                }]
            }],
            data3: [{
                value: 'zhejiang',
                label: '浙江',
                children: [{
                    value: 'hangzhou',
                    label: '杭州',
                    children: [{
                        value: 'xihu',
                        label: '西湖'
                    }]
                }]
            }, {
                value: 'jiangsu',
                label: '江苏',
                children: [{
                    value: 'nanjing',
                    label: '南京',
                    children: [{
                        value: 'zhonghuamen',
                        label: '中华门'
                    }]
                }]
            }],
            data4: [
                {
                    value: 'beijing',
                    label: '北京',
                    children: [],
                    loading: false
                },
                {
                    value: 'hangzhou',
                    label: '杭州',
                    children: [],
                    loading:false
                }
            ]
		}
	},
	methods:{
        updata() {
            this.value1 = []
            // this.value = ['beijing','wangfujing']
            this.value1 = ['zhejiang','hangzhou','xihu']
            this.data = [{
                    value: 'zhejiang',
                    label: '浙江',
                    children: [{
                        value: 'hangzhou',
                        label: '杭州',
                        children: [{
                            value: 'xihu',
                            label: '西湖',
                            code: 310000
                        }]
                    }]
                }, {
                    value: 'jiangsu',
                    label: '江苏',
                    children: [{
                        value: 'nanjing',
                        label: '南京',
                        children: [{
                            value: 'zhonghuamen',
                            label: '中华门',
                            code: 210000
                        }]
                    }]
                }]
        },
        init1(){
            this.text1 = '未选择'
            this.value1 = []
            this.data = [{
                value: 'beijing',
                label: '北京',
                children: [
                    {
                        value: 'gugong',
                        label: '故宫'
                    },
                    {
                        value: 'tiantan',
                        label: '天坛'
                    },
                    {
                        value: 'wangfujing',
                        label: '王府井'
                    }
                ]
            }, {
                value: 'jiangsu',
                label: '江苏',
                children: [
                    {
                        value: 'nanjing',
                        label: '南京',
                        children: [
                            {
                                value: 'fuzimiao',
                                label: '夫子庙',
                                children: [
                                    {
                                        value: 'test4',
                                        label: '测试4',
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        value: 'suzhou',
                        label: '苏州',
                        children: [
                            {
                                value: 'zhuozhengyuan',
                                label: '拙政园',
                                disabled:true
                            },
                            {
                                value: 'shizilin',
                                label: '狮子林',
                            }
                        ]
                    }
                ],
            },{
                value:'shanghai',
                label:'上海'
            }]
        },
        cleardata() {
        	this.value1 = []
            this.data = []
            this.text1 = '未选择'
        },
        change1(data) {
            console.log('change选中项：',data)
            this.text1 = data.item.label
        },
        change2(data) {
            console.log('change选中项：',data)
            this.text2 = data.label
        },
        change3(data) {
            console.log('change选中项：',data)
            this.text3 = data.item.label
        },
        change4(data) {
            console.log('filter选中项：',data)
        },
        openChange(val) {
            console.log('打开关闭时显示状态：',val)
        },
        loadData(item,callback) {
            console.log('动态加载选中：',item)
            item.loading = true;
            setTimeout(() => {
                if (item.value === 'beijing') {
                    item.children = [
                        {
                            value: 'csdn',
                            label: 'CSDN',
                            children: [],
                        },
                        {
                            value: 'baidu',
                            label: '百度'
                        },
                        {
                            value: 'sina',
                            label: '新浪'
                        }
                    ];
                } else if (item.value === 'hangzhou') {
                    item.children = [
                        {
                            value: 'ali',
                            label: '阿里巴巴'
                        },
                        {
                            value: '163',
                            label: '网易'
                        }
                    ];
                } else if (item.value === 'csdn') {
                    item.children = [
                        {
                            value: 'item',
                            label: 'item1',
                            // children:[],
                        },
                        {
                            value: '2',
                            label: 'item2'
                        }
                    ];
                }
                // else if (item.value === 'item') {
                //     item.children = [
                //         {
                //             value: '4-1',
                //             label: 'test4-1'
                //         },
                //         {
                //             value: '4-2',
                //             label: 'text4-2'
                //         }
                //     ]
                // }
                item.loading = false;
                callback()
            }, 1000);
        },
        init4(){
            this.value4 = []
            this.data4 = [
                {
                    value: 'beijing',
                    label: '北京',
                    children: [],
                    loading: false
                },
                {
                    value: 'hangzhou',
                    label: '杭州',
                    children: [],
                    loading:false
                }
            ]
        }
	},
}
</script>

<style scoped>
.demo-cascader .mj-cascader {width:220px;}
</style>
